<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <h1 class="info">账号注销</h1>
            </div>
        </template>
        <div class="registerwin">
            <div class="h">确认注销您的账号</div>
            <el-form :model="form" label-width="120px" ref="ruleFormRef" :rules="rules" :size="formSize" status-icon>
                <div class="registerform">
                    <el-form-item label="用户名" prop="username">
                        <el-input disabled v-model="username" class="input" />
                    </el-form-item>
                    <el-form-item class="button-container">
                        <el-button type="primary" @click="onCancelAccount"
                                   style="margin-top: 15px;">确认注销</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>
    </el-card>
</template>

<script setup>
import { ref, reactive } from 'vue'
import $axios from '../components/utils/axios'
import { ElNotification } from 'element-plus'

const form = reactive({
    id: sessionStorage.getItem('id'),
})

const username = ref('')
username.value = JSON.parse(sessionStorage.getItem('user')).username

const formSize = ref('default')
const ruleFormRef = ref()

const onCancelAccount = async () => {
    const path = '/user/delete'
    const { data: res } = await $axios.delete(path, { data: form })
    if (res.code === 200) {
        ElNotification({
            title: '成功',
            message: '账号已成功注销。',
            type: 'success',
        })
        // 假设注销后跳转到登录页
        window.location.href = '/login';
    } else {
        let message = '注销失败，请稍候再试！';
        if (res.code === 103) {
            message = '服务器错误，无法完成注销！';
        }
        ElNotification({
            title: '失败',
            message,
            type: 'error',
        })
    }
}
</script>

<style scoped>
.box-card {
    width: 99%;
    height: 95%;
    margin-top: 12px;
    border-radius: 12px;
    background: linear-gradient(to bottom right, #ffebee, #ffcdd2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5em;
    font-weight: bold;
    color: #d32f2f;
}

.h {
    font-size: 1.25em;
    margin-top: 15px;
    margin-left: 25px;
    font-weight: bold;
    color: #c62828;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.registerform {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.el-form-item {
    margin-bottom: 20px;
    width: 100%;
}

.input {
    width: 250px; /* Keep input box length consistent */
}

.button-container {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

.el-button {
    transition: all 0.3s ease;
}

.el-button:hover {
    transform: translateY(-2px);
}

.info {
    color: #c62828;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
</style>
